<template>
	<view class="center">
		<u-action-sheet :list="list" v-model="timeShow" :cancel-btn="false" @click="timeClick"></u-action-sheet>
		<u-toast ref="uToast" />
		<view class="startClass">
			<text class="startClass startText">开始时间</text>
			<text class="startClass hour">时</text>
			<picker class="startClass timerDiv" mode="time" @change="bindTimeChange">
				<text>{{startTime.hour}}</text>
			</picker>
			<text class="startClass hour">分</text>
			<picker class="startClass timerDiv" mode="time" @change="bindTimeChange">
				<text>{{startTime.minute}}</text>
			</picker>
		</view>
		
		<view class="startClass">
			<text class="startClass startText">结束时间</text>
			<text class="startClass hour">时</text>
			<picker class="startClass timerDiv" mode="time" @change="bindTimeEnd">
				<text>{{endTime.hour}}</text>
			</picker>
			<text class="startClass hour">分</text>
			<picker class="startClass timerDiv" mode="time" @change="bindTimeEnd">
				<text>{{endTime.minute}}</text>
			</picker>
		</view>
		
		<view style="margin: 50rpx;">
			<view class="checkboxDiv">
				<u-checkbox v-model="list[0].checked"  name="1"  >周一</u-checkbox>
				<u-checkbox v-model="list[1].checked"  name="2">周二</u-checkbox>
				<u-checkbox v-model="list[2].checked"  name="3">周三</u-checkbox>
			</view>
			<view class="checkboxDiv">
				<u-checkbox v-model="list[3].checked"  name="4">周四</u-checkbox>
				<u-checkbox v-model="list[4].checked"  name="5">周五</u-checkbox>
				<u-checkbox v-model="list[5].checked"  name="6">周六</u-checkbox>
			</view>
			<u-checkbox v-model="list[6].checked" name="7">周日</u-checkbox>
		</view>
		
		<view class="appButton box box-align-center box-pack-center" style="margin-top: 20rpx;">
			<u-button v-if="isEdit" class="app_btn" size="medium" :custom-style="app_btn" @click="getEditTimeControl">编辑</u-button>
			<u-button v-else class="app_btn" size="medium" :custom-style="app_btn" @click="getaddTimeControl">添加</u-button>
		</view>
	</view>
</template>

<script>
	import {
		queryTimeControl,
		addTimeControl,
		deleteTimeControl,
		updateTimeControl
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				app_btn: {
					color: '#FFFFFF',
					'background-color': '#2979ff',
					'letter-spacing': '8rpx',
					'line-height': '80rpx',
					overflow: 'hidden',
					'font-weight': '600',
					'border-radius': '80rpx',
				},
				list: [
				{
					name: '周一',
					checked: false,
					disabled: false,
					value: 1
				},
				{
					name: '周二',
					checked: false,
					disabled: false,
					value: 2
				},
				{
					name: '周三',
					checked: false,
					disabled: false,
					value: 3
				},
				{
					name: '周四',
					checked: false,
					disabled: false,
					value: 4
				},
				{
					name: '周五',
					checked: false,
					disabled: false,
					value: 5
				},
				{
					name: '周六',
					checked: false,
					disabled: false,
					value: 6
				},
				{
					name: '周日',
					checked: false,
					disabled: false,
					value: 7
				}],
				weekdays : [],
				timeShow: false,
				startTime: {
					hour: '01',
					minute: '00',
					time: '01:00'
				},
				endTime: {
					hour: '01',
					minute: '00',
					time: '01:00'
				},
				switch: true,
				index: -1,
				mtId: 0,
				isEdit: false
			}
		},
		onLoad(option) {
			if(option.time) {
				let time = JSON.parse(decodeURIComponent(option.time))
				this.isEdit = true
				this.mtId = time.mtId
				this.switch = time.switch
				this.index = time.index
				let start = time.startTime.split(':')
				let end = time.endTime.split(':')
				this.startTime.hour = start[0]
				this.startTime.minute = start[1]
				this.startTime.time = time.startTime
				this.endTime.hour = end[0]
				this.endTime.minute = end[1]
				this.endTime.time = time.endTime
				
				for(var i in time.weekdays) {
					this.weekdays.push(time.weekdays[i])
					let index = time.weekdays[i]-1
					if(this.list[index]) {
						this.list[index].checked = true
					}
				}
			}
		},
		computed: {
			
		},
		methods: {
			timeClick(index) {
			},
			closeConfirm(e) {
				// this.closeTmie = `${e.hour}:${e.minute}`
			},
			getaddTimeControl() {
				this.getWeekDays()
				let params = {
					id: uni.getStorageSync('snId'),
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					startTime: this.startTime.time,
					endTime: this.endTime.time,
					weekdays: this.weekdays
				}
				addTimeControl(params).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500)
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			getEditTimeControl() {
				this.getWeekDays()
				let param = {
					id: uni.getStorageSync('snId'),
					index: this.index,
					switch: this.switch,
					startTime: this.startTime.time,
					endTime: this.endTime.time,
					mtId: this.mtId,
					weekdays: this.weekdays
				}
				updateTimeControl(param).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			bindTimeChange(e) {
				let timer = e.detail.value;
				this.startTime.time = timer
				this.startTime.hour = timer.substr(0,2),
				this.startTime.minute = timer.substr(timer.length-2)
			},
			bindTimeEnd(e) {
				let timer = e.detail.value;
				this.endTime.time = timer
				this.endTime.hour = timer.substr(0,2),
				this.endTime.minute = timer.substr(timer.length-2)
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.weekdays = e
			},
			getWeekDays() {
				let tempArr = [];
				this.list.forEach((item, index) => {
					if (item.checked) {
						tempArr.push(item.value)
					}
				})
				this.weekdays = tempArr
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.time_content {
		padding: 20rpx;

		.boxt {
			font-size: 24rpx;
			color: #999999;
			line-height: 50rpx;
		}

		.title {
			font-size: 32rpx;
		}
	}
	.startClass {
		    background-color: #8cb3d9;
		    display: flex;
		    padding: 20rpx;
		    border-radius: 16rpx;
		    height: 140rpx;
		    // justify-content: center;
		    align-items: center;
			margin: 15rpx;
			
			.startText {
				float: left;
				/* padding: 20rpx; */
				font-size: 35rpx;
				letter-spacing: 3rpx;
				padding: 0rpx;
				margin: 0rpx;
			}
			.hour {
				font-size: 35rpx;
				font-weight: bolder;
				padding: 15rpx;
				margin: 0rpx;
			}
			
			.timerDiv {
				    font-size: 40rpx;
				    padding: 30rpx;
				    background-color: #e6e6e6;
				    border-radius: 25rpx;
				    width: 100rpx;
				    height: 36rpx;
				    /* align-items: center; */
				    text-align: center;
				    /* vertical-align: baseline; */
				    font-weight: bolder;
				    padding-bottom: 40rpx;
			}
			
	}
	.checkboxDiv{
		display: flex;
		justify-content: space-between;
		height: 120rpx;
	}
</style>
